<template>
  <div>
    <div>
      <div id="main" style="width: 500px; height: 500px"></div>
    </div>
  </div>
</template>

<script>
// 记得更改引用的路径
import "../../public/province/fujian";
import "../../public/province/guangdong";
import "../../public/province/shandong";
import anhuiJSON from "../../public/province/anhui.json";

export default {
  mounted() {
    this.drawLine();
  },
  methods: {
    //开始画图了
    drawLine() {

      const mapOption = {
        color: ["#5470c6"],
        tooltip: {
          trigger: "item",
          renderMode: "html",
          // 触发方式
          triggerOn: "click",
          enterable: true,
          backgroundColor: "#fff",
          padding: 0,
          textStyle: {
            color: "#000",
            fontSize: "12",
          },
          extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
        },
        dispatchAction: {
          type: "downplay",
        },
        roam: false,
        roamController: {
          show: true,
          x: "right",
          mapTypeControl: {
            china: true,
          },
        },
        series: [],
        geo: {
          show: true,
          map: "anhui",
          type: "map",
          mapType: "anhui",
          roam: false,
          label: {
            normal: {
              // 显示省份标签
              show: false,
              textStyle: {
                color: "#fff",
                fontSize: 10,
              },
            },
            emphasis: {
              // 对应的鼠标悬浮效果
              show: true,
              // 选中后的字体样式
              textStyle: {
                color: "#000",
                fontSize: 14,
              },
            },
          },
          itemStyle: {
            color: "#ddb926",
            normal: {
              areaColor: "#8abcd1",
              borderColor: "#fff",
              borderWidth: 1,
            },
            emphasis: {
              borderWidth: 0.5,
              borderColor: "#8abcd1",
              areaColor: "#fff",
            },
          },
          emphasis: {
            label: {
              show: false,
            },
          },
        },
      };
      this.$echarts.registerMap("anhui", anhuiJSON, {});
      let myChart = this.$echarts.init(document.getElementById("main"));

      myChart.setOption(mapOption);

    },
  },
};
</script>
<style scoped>
</style>